<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的账户 - 电商网站</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px 0;
        }
        
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }
        
        nav ul li {
            cursor: pointer;
        }
        
        .profile-container {
            padding: 40px 0;
        }
        
        .profile-tabs {
            display: flex;
            margin-bottom: 20px;
        }
        
        .profile-tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .profile-tab.active {
            border-bottom-color: #4CAF50;
            font-weight: bold;
        }
        
        .profile-content {
            border: 1px solid #ddd;
            padding: 20px;
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }
        
        .user-info {
            margin-bottom: 20px;
        }
        
        .user-info-row {
            display: flex;
            margin-bottom: 10px;
        }
        
        .user-info-label {
            width: 120px;
            color: #666;
        }
        
        .user-info-value {
            flex: 1;
        }
        
        .address-item {
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .address-item.default::before {
            content: '默认';
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #4CAF50;
            color: white;
            padding: 2px 5px;
            font-size: 12px;
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            cursor: pointer;
            border-radius: 3px;
            margin-right: 10px;
        }
        
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        
        .btn-secondary {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
        }
        
        .order-item {
            border: 1px solid #ddd;
            margin-bottom: 20px;
        }
        
        .order-header {
            background-color: #f8f9fa;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }
        
        .order-details {
            padding: 10px;
        }
        
        .order-product {
            display: flex;
            margin-bottom: 10px;
        }
        
        .order-product img {
            max-width: 80px;
            height: auto;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">电商网站</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#" id="login-link">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                    <li><a href="cart.html">购物车 (<span id="cart-count">0</span>)</a></li>
                    <li><a href="profile.html">我的账户</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <div class="profile-container">
            <h1>我的账户</h1>
            
            <div class="profile-tabs">
                <div class="profile-tab active" onclick="showTab('user-info')">账户信息</div>
                <div class="profile-tab" onclick="showTab('address')">收货地址</div>
                <div class="profile-tab" onclick="showTab('orders')">我的订单</div>
            </div>
            
            <div class="profile-content">
                <!-- 账户信息 -->
                <div class="tab-pane active" id="user-info">
                    <h2>基本信息</h2>
                    <div class="user-info">
                        <div class="user-info-row">
                            <div class="user-info-label">用户名:</div>
                            <div class="user-info-value" id="username"></div>
                        </div>
                        <div class="user-info-row">
                            <div class="user-info-label">邮箱:</div>
                            <div class="user-info-value" id="email"></div>
                        </div>
                        <div class="user-info-row">
                            <div class="user-info-label">注册时间:</div>
                            <div class="user-info-value" id="register-time">2023-01-01</div>
                        </div>
                    </div>
                    <button class="btn btn-primary" onclick="editProfile()">编辑资料</button>
                    <button class="btn btn-secondary" onclick="changePassword()">修改密码</button>
                </div>
                
                <!-- 收货地址 -->
                <div class="tab-pane" id="address">
                    <h2>收货地址</h2>
                    <div id="address-list">
                        <!-- 地址将通过JavaScript动态加载 -->
                    </div>
                    <button class="btn btn-primary" onclick="addAddress()">添加新地址</button>
                </div>
                
                <!-- 我的订单 -->
                <div class="tab-pane" id="orders">
                    <h2>我的订单</h2>
                    <div id="order-list">
                        <!-- 订单将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 电商网站. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/auth.js"></script>
    <script src="js/profile.js"></script>
    <script>
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查访问权限
            auth.checkAccess();
            
            // 更新登录状态
            auth.updateLoginStatus();
            
            // 更新购物车数量
            updateCartCount();
            
            // 加载用户信息
            loadUserInfo();
            
            // 加载地址信息
            loadAddresses();
            
            // 加载订单信息
            loadOrders();
        });
        
        // 切换标签页
        function showTab(tabId) {
            document.querySelectorAll('.tab-pane').forEach(pane => {
                pane.classList.remove('active');
            });
            document.querySelectorAll('.profile-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            document.getElementById(tabId).classList.add('active');
            document.querySelector(`.profile-tab[onclick="showTab('${tabId}')"]`).classList.add('active');
        }
    </script>
</body>
</html>